<template>
	<view class="content">
		<u-navbar title="商城" :placeholder="true">
			<view class="u-nav-slot" slot="left" @click="leftClick">
				<u-icon v-if="type == 1 ||type==2" name="arrow-left" size="35"></u-icon>
			</view>
		</u-navbar>
		<!-- 搜索 -->
		<view class="nav">
			<u--input shape="circle" placeholder="搜索..." prefixIcon="search"
				prefixIconStyle="font-size: 29px;color: #909399" v-model="page.name"
				:customStyle="{backgroundColor:'#f6f6f6',padding:'15rpx 30rpx',boxSizing:' border-box'}"
				@change="search()"></u--input>
			<image src="../../static/images/index/sx.png" mode="scaleToFill" @click="getscreen"></image>
		</view>

		<!-- 筛选 -->
		<u-popup :show="showpopup" mode="right" @close="close" @open="open" :customStyle="{width:'600rpx'}">
			<view class="u-popup">
				<view class="photographer">
					<view class="gender-label">是否需要摄影师</view>
					<view class="needphotographer">
						<view class="stay" v-for="item,index in needphotographerList" :key="index"
							:class="{active:from.needCameraman == index}" @click="getneedphotographer(index,item)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="photographer">
					<view class="gender-label">是否需要司机</view>
					<view class="needphotographer">
						<view class="stay" v-for="(item, index) in cartList" :key="index"
							:class="{active:from.carType == item.dictValue}" @click="selectDriver(index, item)">
							<text class="option-text">{{ item.dictLabel }}</text>
						</view>
					</view>
				</view>
				<view class="photographer">
					<view class="gender-label">是否包含门票</view>
					<view class="needphotographer">
						<view class="stay" v-for="(item, index) in feeList" :key="index"
							:class="{active:from.containTickets == item.dictValue}" @click="getadmission(index, item)">
							<text class="option-text">{{ item.dictLabel }}</text>
						</view>
					</view>
				</view>
				<view class="photographer">
					<view class="gender-label">是否包含住宿</view>
					<view class="needphotographer">
						<view class="stay" v-for="(item, index) in stayList" :key="index"
							:class="{active:from.containStay == item.dictValue}" @click="getstay(index, item)">
							<text class="option-text">{{ item.dictLabel }}</text>
						</view>
					</view>
				</view>
				<view class="photographer photographer-number">
					<view class="gender-label">游玩天数</view>
					<view class="needphotographer needphotographer-number">
						<view class="number-wrap">
							<text @click="minus()">-</text>
							<view class="number-text">
								{{from.days}}
							</view>
							<text @click="add()">+</text>
						</view>
						<text></text>
					</view>
				</view>
				<view class="photographer photographer-number">
					<view class="gender-label">游玩人数</view>
					<view class="needphotographer needphotographer-number">
						<view class="number-wrap">
							<text @click="minuspeople()">-</text>
							<view class="number-text">
								{{from.peopleNumber}}
							</view>
							<text @click="addpeople()">+</text>
						</view>
					</view>
				</view>

				<view class="button">
					<button @click="getresetting">重置</button>
					<button @click="getcomplete">完成</button>
				</view>
			</view>
		</u-popup>

		<!-- 背景框 -->
		<view class="background-box">
			<!-- 商城列表 -->
			<template v-if="isFilter || page.name">
				<u-empty v-if="filterShoppingMallList.length <= 0" mode="list" width="50%" textSize="30"
					icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>

				<custom-waterfalls-flow v-else ref="filterWaterfallsFlowRef" :value="filterShoppingMallList"
					image-key="images" :column="2" :columnSpace="1.5">

					<view class="mall" v-for="(item, index) in filterShoppingMallList" :key="index"
						slot="slot{{index}}">
						<view class="mall-title">
							<text class="mall-name">{{item.pathName}}</text>
							<view class="mall-title-right">
								<text v-if="item.cameramanSex == 'male_photography'">男摄影师</text>
								<text v-else-if="item.cameramanSex == 'female_photography'">女摄影师</text>
								<text v-else>不包含摄影师</text>
								<text v-if="item.carType == 'five_seats' ">+五座车</text>
								<text v-else-if="item.carType== 'seven_seats'">
									七座车
								</text>
								<text v-else-if="item.carType== 'no_package_car'">
									不包车
								</text>
							</view>
						</view>
						<view class="mall-bottom">
							<text>￥{{item.amount}}</text>
							<view @click="getphotography(item.id)">查看套餐</view>
						</view>
					</view>
				</custom-waterfalls-flow>
			</template>

			<custom-waterfalls-flow ref="waterfallsFlowRef" :value="shoppingMallList" image-key="images" :column="2"
				:columnSpace="1.5">

				<view class="mall" v-for="(item, index) in shoppingMallList" :key="index" slot="slot{{index}}">
					<view class="mall-title">
						<text class="mall-name">{{item.pathName}}</text>
						<view class="mall-title-right">
							<text v-if="item.cameramanSex == 'male_photography'">男摄影师</text>
							<text v-else-if="item.cameramanSex == 'female_photography'">女摄影师</text>
							<text v-else>不包含摄影师</text>
							<text v-if="item.carType == 'five_seats' ">+五座车</text>
							<text v-else-if="item.carType== 'seven_seats'">
								七座车
							</text>
							<text v-else-if="item.carType== 'no_package_car'">
								不包车
							</text>
						</view>
					</view>
					<view class="mall-bottom">
						<text>￥{{item.amount}}</text>
						<view @click="getphotography(item.id)">查看套餐</view>
					</view>
				</view>

			</custom-waterfalls-flow>
			<!-- </view> -->
		</view>

		<!-- 底部tabbar -->
		<cc-myTabbar :tabBarShow="1"></cc-myTabbar>
	</view>
</template>





<script>
	export default {
		data() {
			return {
				shoppingMallList: [],
				filterShoppingMallList:[],
				column: 2,
				isFilter: false,
				page: {
					name: "",
					pageNum: 1,
					pageSize: 10,
				},
				total: 1,
				showpopup: false, //筛选
				needphotographerList: [{
						name: '需要摄影师',
						value: 0
					},
					{
						name: '不需要摄影师',
						value: 1
					}
				],
				cartList: [],
				from: {
					needCameraman: 0, //是否需要摄影师
					carType: "no_package_car", //是否需要包车
					containTickets: 0, //门票
					containStay: 0, //住宿
					days: 1, //天数
					peopleNumber: 1, //人数
				},
				feeList: [{
						dictLabel: '包含门票',
						dictValue: 0,
					},
					{
						dictLabel: '不包含门票',
						dictValue: 1,
					}
				],
				stayList: [{
						dictLabel: '包含住宿',
						dictValue: 0,
					},
					{
						dictLabel: '不包含住宿',
						dictValue: 1,
					}
				],
				type: 0
			}
		},
		components: {},
		onReady() {},
		methods: {



			leftClick() {
				if (this.type == 1) {
					uni.reLaunch({
						url: `/pages/index/index?showNav=${3}`
					})
				} else {
					uni.reLaunch({
						url: `/pages/index/index?showNav=${2}`
					})
				}
			},
			open() {},
			close() {
				this.showpopup = false
			},
			getscreen() {
				this.showpopup = true
			},
			// 减少
			minus() {
				if (this.from.days >= 1) {
					this.from.days--
				} else {
					this.$u.toast('最少选择一天')
					return
				}
			},
			add() {
				if (this.from.days <= 99) {
					this.from.days++
				} else {
					this.$u.toast('最多选择一百天')
					return
				}
			},
			minuspeople() {
				if (this.from.peopleNumber >= 1) {
					this.from.peopleNumber
				} else {
					this.$u.toast('最少选择一个人')
					return
				}
			},
			addpeople() {
				if (this.from.peopleNumber <= 99) {
					this.from.peopleNumber++
				} else {
					this.$u.toast('最多选择一百个人')
					return
				}
			},

			handleImages(data) {
				return data.map(item => Object.assign(item, {
					images: this.$u.fileBaseUrl + item.images.split(',')[0]
				}));
			},


			// 获取商城列表
			async getPackageList() {
				let res = await this.$u.api.getPackageList(this.page)
				if (res.code == 200) {

					if (this.page.pageNum == 1) {
						this.shoppingMallList = this.handleImages(res.rows)
						this.$refs.waterfallsFlowRef.refresh();
					} else {
						// 如果不是第一页，追加数据
						this.shoppingMallList = [...this.shoppingMallList, ...this.handleImages(res.rows)];
						this.$refs.waterfallsFlowRef.refresh();
					}
					this.total = res.total;
				}
			},
			// 跳转到支付订单页面
			getphotography(id) {
				uni.navigateTo({
					url: `/packagesMe/me/shoppingDetail?id=${id}`
				})
			},
			// 跳转到商城详情
			goshoppingDetail(id) {
				uni.navigateTo({
					url: `/packagesMe/me/shoppingDetail?id=${id}`
				})
			},
			// // 上拉加载
			loadMore() {
				if (this.showpopup == true) return
				if (this.shoppingMallList.length >= this.total) {
					uni.showToast({
						title: '没有更多套餐了',
						icon: "none"
					});
					return;
				}

				this.page.pageNum += 1;
				uni.showLoading({
					title: '加载中...'
				});

				this.getPackageList().then(() => {
					uni.hideLoading();
				}).catch(error => {
					console.error('加载更多数据时出错:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},
			// 搜索商城列表
			async search(value) {
				this.page.name = value
				let res = await this.$u.api.getPackageList(this.page)
				if (res.code == 200) {
					this.filterShoppingMallList = this.handleImages(res.rows)
					// this.$refs.filterWaterfallsFlowRef.refresh();
				}
			},
			// 获取车辆数据
			async getacrtype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: 'car_type'
				})
				if (res.code == 200) {
					this.cartList = res.data;
				}
			},
			// 选择是否需要摄影师
			getneedphotographer(index, item) {
				this.from.needCameraman = item.value
			},
			// 选择几座车
			selectDriver(index, item) {
				this.from.carType = item.dictValue
			},
			// 门票
			getadmission(index, item) {
				this.from.containTickets = item.dictValue
			},
			// 住宿
			getstay(index, item) {
				this.from.containStay = item.dictValue
			},
			// 重置
			getresetting() {
				this.from = {
					needCameraman: 0, //是否需要摄影师
					carType: "no_package_car", //是否需要包车
					containTickets: 0, //门票
					containStay: 0, //住宿
					days: 0, //天数
					peopleNumber: 0
				}
			},
			// 完成筛选
			async getcomplete() {
				let res = await this.$u.api.getPackageList({
					...this.from,
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize
				})
				if (res.code == 200) {
					this.isFilter = true
					// if (this.page.pageNum == 1) {
						this.filterShoppingMallList = this.handleImages(res.rows);
						// this.$refs.filterWaterfallsFlowRef.refresh();
					// } else {
					// 	// 如果不是第一页，追加数据
					// 	this.filterShoppingMallList = [...this.filterShoppingMallList, ...this.handleImages(res.rows)];
					// 	this.$refs.filterWaterfallsFlowRef.refresh();
					// }
					// this.total = res.total;
					this.showpopup = false
				}
			}
		},
		onLoad(options) {
			this.getPackageList()
			this.getacrtype() //获取车辆数据
			this.type = options.type
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 刷新数据的逻辑
			this.page.pageNum = 1
			this.page.pageSize = 10
			this.getPackageList()
			// 模拟异步操作
			setTimeout(() => {
				// 刷新完成后，结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		onReachBottom() {
			this.loadMore();
		},
	}
</script>


<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 92vh;
		background-color: #fff;
		padding: 30rpx 0 100rpx 0;

		.u-nav-slot {
			padding-top: 25rpx;
			box-sizing: border-box;
		}

		.nav {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin: 0 30rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.u-popup {
			margin-top: 200rpx;

			.photographer {
				padding: 30rpx 30rpx 0rpx 30rpx;
				box-sizing: border-box;

				.needphotographer {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 0 0 0;
					box-sizing: border-box;

					.u-slider {
						display: flex;
						align-items: center;
						padding: 20rpx 30rpx;
						box-sizing: border-box;
						border: 1rpx solid $overall-color;
						border-radius: 40rpx;
						color: $overall-color;
						font-size: 27rpx;
						margin: 0 20rpx 0 0;

						text {
							font-size: 50rpx;
						}
					}

					.stay {
						flex: 1;
						color: #333;
						font-size: 27rpx;
						margin: 0 20rpx 0 0;

						&.active {
							position: relative;
							color: #f55c21;
							margin-left: 15rpx;
						}

						&.active::before {
							content: '';
							width: 8rpx;
							height: 8rpx;
							border-radius: 50%;
							background-color: #f55c21;
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							left: -15rpx;

						}
					}
				}

				.crown {
					position: absolute;
					top: 5px;
					left: 5px;
					font-size: 20px;
				}
			}

			.photographer-number {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.needphotographer-number {
					padding-top: 0;
				}

				.number-wrap {
					width: 110rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					background: #cccccc;
					color: white;
					border-radius: 6rpx;

					.number-text {
						width: 36rpx;
						height: 32rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #f55d22;
						background: white;
						border-radius: 6rpx;
					}
				}
			}

			.button {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 90rpx;
				font-size: 28rpx;
				margin-top: 20rpx;

				button {
					width: 200rpx;
					height: 60rpx;
					margin-top: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;

					&:nth-child(1) {
						color: $overall-color;
						background-color: #fff;
						border: 2rpx solid $overall-color;
					}

					&:nth-child(2) {
						color: #ffffff;
						background-color: $overall-color;
					}
				}
			}
		}

		.background-box {
			background-color: #e1e1e1;
			border-radius: 10rpx;
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			min-height: calc(100vh - 500rpx);
			/* Adjust the height to fit the screen */
			position: relative;
			overflow: hidden;
			margin: 30rpx 8rpx 0;

			&::after {
				content: '';
				position: absolute;
				z-index: -1;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 200rpx;
				background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
			}
		}


		.mall {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 10rpx;

			image {
				width: 100%;
				border-radius: 10rpx;
				object-fit: cover;
			}

			.mall-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 0;
				gap: 10rpx;

				.mall-name {
					flex: 1;
					// display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				&-right {
					color: #999;
					font-size: 18rpx;
				}

			}

			.mall-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 0;

				text {
					color: red;
				}

				&>view {
					padding: 8rpx 20rpx;
					font-size: 20rpx;
					background-color: $overall-color;
					color: #fff;
					border-radius: 8rpx;
				}
			}
		}

		.loading-tip {
			padding: 20rpx;
			text-align: center;
		}
	}



	.item {
		padding: 10rpx 10rpx 20rpx;

		.title {
			line-height: 48rpx;
			font-size: 28rpx;
			color: #222;
		}

		.desc {
			font-size: 24rpx;
			color: #666;
		}
	}
</style>